import React from "react";
import { Divider, Dropdown, Icon, Badge, Menu, Popconfirm } from "antd";
import moment from "moment";
import { Link } from "dva/router";
import { ROLE_TYPE_SUPER } from "../constants";
import styles from './LabelColumns.less';

// dataPrivilege = 1 可以操作
const renderHandleUser = (record, detailUser, addUser) => (
  record.useStatus === 1 ?
    <a rel="noopener noreferrer" onClick={() => detailUser(record)}>
      查看用户
    </a>
  :
    <a rel="noopener noreferrer" onClick={() => addUser(record)}>
      添加用户
    </a>
);

// dataPrivilege = 0 不可以操作
const renderShowUser = (record, detailUser) => (
  record.useStatus === 1 ?
    <a rel="noopener noreferrer" onClick={() => detailUser(record)}>
      查看用户
    </a>
  :
    <span style={{ color: '#ccc' }}>添加用户</span>
);

const renderAddUser = (record, detailUser, addUser) => (
  <React.Fragment>
    {
      record.dataPrivilege === 1 ?
        renderHandleUser(record, detailUser, addUser)
        :
        renderShowUser(record, detailUser)
    }
  </React.Fragment>
);

const renderUserObject = (roleType) => (
  roleType === ROLE_TYPE_SUPER ?
  {
    title: "使用对象",
    dataIndex: "useObject",
    render: (text = []) => {
      const value = text.map(item => item.name).join(', ') || '-';
      return (
        <span title={value}>{value}</span>
      );
    }
  }
  : {}
);

// dataPrivilege：这个字段为 1 表示具有完全的操作权 可修改，和删除；如果为 0 不可编辑和删除
const moreMenu = (roleType, record, delLabel) => (
  <Menu>
    <Menu.Item>
      <Link
        to={roleType === ROLE_TYPE_SUPER ? 
          `/messageCenter/channelManager/labelManager/labelDetail/${record.labelId}`
          :
          `/messageCenter/channelManager/myLabelManager/myLabelDetail/${record.labelId}`
        }
      >
        标签详情
      </Link>
    </Menu.Item>

    <Menu.Item>
      {
        record.dataPrivilege === 0 || record.useStatus === 1 ? <span style={{ color: '#ccc' }}>编辑</span>
          :
          <Link
            to={roleType === ROLE_TYPE_SUPER ?
              `/messageCenter/channelManager/labelManager/editLabel/${JSON.stringify(record)}`
              :
              `/messageCenter/channelManager/myLabelManager/myEditLabel/${JSON.stringify(record)}`
            }
          >
            编辑
          </Link>
      }
    </Menu.Item>

    <Menu.Item>
      {
        record.dataPrivilege === 0 || record.useStatus === 1 ? <span style={{ color: '#ccc' }}>删除</span>
          :
          <Popconfirm
            title={`你是否要删除${record.labelName}?`}
            onConfirm={() => delLabel(record)}
            okText="确定"
            cancelText="取消"
            placement="topRight"
            overlayClassName={styles.overlayWrap}
          >
            <a>删除</a>
          </Popconfirm>
      }
    </Menu.Item>
  </Menu>
);

// dataPrivilege = 1 可以操作
const renderHandleStatus = (record, handleStatus) => (
  record.useStatus === 1 ?
    <a onClick={(e) => handleStatus(e, record.labelId, 0)}>停用</a>
  :
    <a onClick={(e) => handleStatus(e, record.labelId, 1)}>启用</a>
);

// dataPrivilege = 0 不可以操作
const renderShowStatus = (record) => (
  record.useStatus === 1 ?
    <span style={{ color: '#ccc' }}>停用</span>
  :
    <span style={{ color: '#ccc' }}>启用</span>
);


/**
 * @param roleType 角色类型（超级管理员、管理员、使用者）
 * @param detailUser 用户详情
 * @param addUser 添加用户
 * @param delLabel 删除标签
 * @param handleStatus 更改状态
 * 
 * */
const Columns = (roleType, detailUser, addUser, delLabel, handleStatus) => [
  {
    title: "标签名称",
    dataIndex: "labelName",
    render: text => (
      <span
        className={styles.tab_col}
        title={text}
      >
        {text}
      </span>
    )
  },
  {
    title: "标签描述",
    dataIndex: "labelDescription",
    render: text => (
      <span
        className={styles.tab_col}
        title={text}
      >
        {text}
      </span>
    )
  },
  {
    title: "管理员",
    dataIndex: "owner",
    render: (text = []) => (
      <span>{text.map(item => item.name).join(', ') || '-'}</span>
    )
  },
  {
    title: "创建时间",
    dataIndex: "timeCreate",
    sorter: true,
    defaultSortOrder: "descend",
    render: (text, record) =>
      moment(record.timeCreate).format("YYYY-MM-DD HH:mm:ss")
  },
  {
    ...renderUserObject(roleType)
  },
  {
    title: "状态",
    dataIndex: "useStatus",
    filters: [
      { text: "未启用", value: 0 },
      { text: "已启用", value: 1 }
    ],
    filterMultiple: false,
    render: text => (
      <div>
        {text === 1 ? (
          <Badge status="processing" text="已启用" />
        ) : (
          <Badge status="default" text="未启用" />
        )}
      </div>
    )
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: 120,
    render: (text, record) => (
      <span>
        {
          record.dataPrivilege === 1 ?
            renderHandleStatus(record, handleStatus)
          :
            renderShowStatus(record)
        }
        <Divider type="vertical" />

        { renderAddUser(record, detailUser, addUser) }
        <Divider type="vertical" />

        <Dropdown overlay={moreMenu(roleType, record, delLabel)} trigger={['click']}>
          <a>
            更多 <Icon type="down" />
          </a>
        </Dropdown>
      </span>
    )
  }
];

export default Columns;
